<template>
  <view class="header" :style="style">
    <view
      class="header-box"
      :style="[
        {
          height: props.bgHeight + 'rpx' || customBarH + 'px',
          paddingTop: statusBarH + 'px',
          color: titleColor,
          background: bgAttribute,
        },
      ]"
    >
      <view @tap="goBack">
        <slot name="back">返回</slot>
      </view>
      <view>{{ title }}</view>
      <view style="width: 32px"></view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref, computed } from 'vue'

const { statusBarHeight } = uni.getSystemInfoSync()
const custom = uni.getMenuButtonBoundingClientRect()

const props = defineProps({
  // 标题名称
  title: {
    type: String,
    default: '',
    required: false,
  },
  // 标题颜色
  titleColor: {
    type: String,
    default: '#000',
    required: false,
  },
  // 背景颜色
  bgAttribute: {
    type: String,
    default: '#fff',
    required: false,
  },
  // 背景高度
  bgHeight: {
    type: Number,
    default: 0,
    required: false,
  },
})

// 自定义条形图高度
const customBarH = ref(0)
// 状态栏高度
const statusBarH = ref(0)

const style = computed(() => `height: ${props.bgHeight + 'rpx' || customBarH.value + 'px'}`)

onLoad(() => {
  statusBarH.value = (statusBarHeight as number) + 10
  customBarH.value = custom.bottom + custom.top - (statusBarHeight as number)
})

const goBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss">
.header {
  width: 100vw;
  &-box {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
  }
}
</style>
